<template>
    <div :style="{
        height: '100%',
        padding: token.paddingXS + 'px',
    }">
        <div :style="{
            height: '100%',
            backgroundColor: token.colorBgContainer,
            borderRadius: token.borderRadius + 'px',
            boxShadow: token.boxShadow,
        }">
            <component v-if="RenderState" :is="ContentComp" :appId="Route.params.appId" :formId="Route.params.formId" />
        </div>
    </div>
</template>

<script setup>
// 基础引用
import { watch, ref, shallowRef, nextTick } from 'vue'
import { UseAppConfigStore } from '../../AppStore.js'
import { useRoute } from 'vue-router';
import { theme } from 'ant-design-vue';
const { token } = theme.useToken();
const Route = useRoute();
const AppConfig = UseAppConfigStore();
const props = defineProps(['FormType']);

const ContentComp = shallowRef();

const RenderState = ref(false);

watch(Route, () => {
    RenderState.value = false;
    nextTick(() => {
        RenderState.value = true;
    });
}, { deep: true, immediate: true })

watch(() => props.FormType, value => {
    ContentComp.value = AppConfig.ContentComp[value];
}, { immediate: true })


</script>

<style lang="less" scoped></style>